<template>
  <div class="lineBack">
    <div id="lineChartE" style="width: 225px; height: 150px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      myChart: null,
      currentData: null, // 用于展示点击的点的数据
      option: {
        title: {
          // text: '库房状态', // 设置图表的标题
          top: '10%', // 标题的位置
          left: 'center', // 标题水平居中
          textStyle: {
            fontSize: 21, // 标题字体大小
            fontWeight: 'bold' // 标题字体粗细
          }
        },
        tooltip: {
          trigger: 'item', // 触发类型为 item
          formatter: '{b}: {c}' // 显示数据名称和值
        },
        xAxis: {
          show: false, // 隐藏 X 轴
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // X 轴的数据
        },
        yAxis: {
          show: false, // 隐藏 Y 轴
          type: 'value',
        },
        series: [
          {
            name: '库房状态',
            type: 'scatter', // 改为散点图
            symbol: 'circle', // 点的形状
            symbolSize: 10, // 点的大小
            data: [620, 1932, 601, 534, 490, 330, 230, 10], // 数据
          }
        ]
      }
    };
  },
  mounted() {
    this.initChart(); // 初始化图表
  },
  destroyed() {
    if (this.myChart) {
      this.myChart.dispose(); // 销毁图表实例
    }
  },
  methods: {
    initChart() {
      // 初始化图表
      this.myChart = echarts.init(document.getElementById('lineChartE'));
      this.myChart.setOption(this.option); // 设置图表配置
      this.myChart.on('click', (params) => {
        if (params && params.data) {
          // 获取点击的数据点的值
          this.currentData = params.data; // 更新当前数据显示
        }
      });
    }
  }
};
</script>

<style scoped>
.lineBack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.data-display {
  margin-top: 10px;
  font-size: 14px;
  color: #333;
}
</style>
